<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.taskType" @tab-change="handleQuery">
      <el-tab-pane label="全部" name="全部"></el-tab-pane>
      <el-tab-pane label="待办" name="待办"></el-tab-pane>
      <el-tab-pane label="已办" name="已办"></el-tab-pane>
    </el-tabs>
    <div class="main-container">
      <div class="tree-container">
        <el-tree :data="treeData" @node-click="nodeClick" node-key="id">
          <template #default="{ data }">
            <div
              class="default-node"
              :class="{
                'is-active': data.id === queryParams.category,
              }"
            >
              {{ data.name }}
            </div>
          </template>
        </el-tree>
      </div>
      <div class="body-container">
      <div class="search">
        <div class="search-left">
          <el-form
          class="search-container"
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          @keyup.enter="handleQuery"
        >
          <el-form-item label="流程名称" prop="processDefinitionName">
            <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程名称" />
          </el-form-item>
          <el-form-item label="流程标识" prop="processDefinitionKey">
            <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程标识" />
          </el-form-item>
          <el-form-item label="流水号" prop="serialNumber">
            <el-input v-model="queryParams.serialNumber" placeholder="请输入流水号" />
          </el-form-item>
          <el-form-item label="申请人" prop="startUsername">
            <el-input v-model="queryParams.startUsername" placeholder="请输入申请人" />
          </el-form-item>
        </el-form>
        </div>
        <div class="search-right">
            <el-form-item :label-width="0">
              <el-button type="primary" icon="Search" @click="handleQuery">查找</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </div>
      </div>
        <div class="table-container">
          <el-table v-loading="loading" :data="dataList">
            <el-table-column label="序号" width="60" type="index" align="center">
              <template #default="scoped">
                <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="流程名称"
              width="140"
              prop="processDefinitionName"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scoped">
                <span>{{ scoped.row.processDefinitionName || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="流程分类"
              width="140"
              prop="category"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scoped">
                <span>{{ getText(scoped.row.category) || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="当前节点"
              width="100"
              prop="taskName"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scoped">
                <span>{{ scoped.row.taskName || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="发起人"
              width="100"
              prop="startUsername"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scoped">
                <span>{{ scoped.row.startUsername || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="申请时间"
              min-width="165"
              prop="createTime"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scoped">
                <span>{{ scoped.row.createTime || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="接收时间"
              min-width="165"
              prop="createTime"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scoped">
                <span>{{ scoped.row.createTime || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="停留时间" min-width="165" prop="duringTime" align="center">
              <template #default="scoped">
                <span style="color: #f78431 !important">{{ scoped.row.duringTime || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column width="220" fixed="right" label="操作" align="center">
              <template #default="scoped">
                <el-button
                  v-if="permission.wf_process_todo_detail"
                  text
                  type="primary"
                  size="default"
                  icon="el-icon-info-filled"
                  @click="handleDynamicRoute(scoped.row, 'detail')"
                >
                  详情
                </el-button>
                <el-button
                  v-if="permission.wf_process_todo_follow"
                  text
                  type="primary"
                  size="default"
                  icon="el-icon-search"
                  @click="handleFlow(scoped.row)"
                >
                  流程图
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <dc-pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.current"
          v-model:limit="queryParams.size"
          @pagination="getData"
        />
      </div>
    </div>
  </div>
  <el-dialog
    v-model="bpmnVisible"
    append-to-body
    destroy-on-close
    title="流程图"
    width="70%"
    class="nf-dialog"
  >
    <nf-design ref="bpmn" style="height: 60vh" :options="bpmnOption"></nf-design>
  </el-dialog>
  <feasibilityDrawer ref="feasibilityDrawerRef"></feasibilityDrawer>
</template>

<script>
import { mapGetters } from 'vuex';
import Api from '@/api/index';
import exForm from './workflow/mixins/ex-form';
import { todoList as getList, detail } from './workflow/api/process/process';
import feasibilityDrawer from '@/views/plugin/workflow/pages/process/desk/components/feasibilityDrawer.vue';
import { findRootInTreeArray } from '@/utils/util';

export default {
  name: 'MyProcess',
  mixins: [exForm],
  components: { feasibilityDrawer },
  data() {
    return {
      loading: false,
      queryParams: {
        current: 1,
        size: 10,
        processDefinitionName: '',
        processDefinitionKey: '',
        serialNumber: '',
        category: '',
        startUsername: '',
        taskType: '待办',
      },
      dataList: [],
      total: 0,
      bpmnVisible: false,
      bpmnOption: {},
      treeData: [],
    };
  },
  computed: {
    ...mapGetters(['permission']),
  },
  mounted() {
    this.getData();
    this.getTree();
    const taskId = this.$route.query.taskId;
    if (taskId) {
      getList(1, 1, { taskId }).then(res => {
        const row = Array.isArray(res.data.data.records) ? res.data.data.records[0] : {};
        this.handleDynamicRoute(row);
      });
    }
  },
  methods: {
    async getData() {
      try {
        this.loading = true;
        const res = await getList(
          this.queryParams.current,
          this.queryParams.size,
          this.queryParams
        );
        const { code, data } = res.data;
        if (code === 200) {
          this.dataList = data.records;
          this.total = data.total;
        }
      } catch (err) {
        console.error(err);
      } finally {
        this.loading = false;
      }
    },
    async getTree() {
      const res = await Api.desk.design.getDesignCategoryTree();
      const { code, data } = res.data;
      if (code === 200) {
        this.treeData = data;
      }
    },
    nodeClick(data) {
      this.queryParams.category = data.id;
      this.handleQuery();
    },
    handleDynamicRoute(row) {
      if (row.processDefinitionKey === 'feasibilityAsessment') {
        this.$refs.feasibilityDrawerRef.openDrawer({
          taskId: row.taskId,
          processInsId: row.processInstanceId || row.processId,
        });
      } else {
        this.dynamicRoute(row, 'detail');
      }
    },
    handleFlow(row) {
      const { taskId, processInstanceId } = row;
      detail({ taskId, processInsId: processInstanceId }).then(res => {
        const { process, flow } = res.data.data;
        this.bpmnOption = {
          mode: 'view',
          xml: process.xml,
          flows: this.handleResolveFlows(flow),
        };
        this.bpmnVisible = true;
      });
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getData();
    },
    resetQuery() {
      this.queryParams.current = 1;
      this.queryParams.size = 10;
      this.queryParams.processDefinitionName = '';
      this.queryParams.processDefinitionKey = '';
      this.queryParams.serialNumber = '';
      this.queryParams.startUsername = '';
      this.queryParams.category = '';
      this.$refs.queryRef.resetFields();
      this.getData();
    },
    getText(category) {
      return findRootInTreeArray(this.treeData, category)?.name;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  .main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 20px;
    .tree-container {
      width: 240px;
      overflow: auto;
      .is-active {
        color: #f26c0c !important;
      }
    }
  }
}
</style>
